<!DOCTYPE html>
<html lang="en">
<!----------------------------------
作者:laoWang--2020-6-24
@www.cqows.cn
----------------------------------->
<head>
    <meta charset="UTF-8">
    <title>模拟故障</title>
    <!--css引入代码-->
    <link rel="stylesheet" href="./Semantic-UI-CSS-master/semantic.css">
    <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="./elementui/index.css">
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
<div id="app">
    <!--故障页/返回/标题-->
    <nav class="ui inverted attached segment m-padded-tb-mini m-shadow-small" id="nav_header" style="height: 64px;position: fixed;top: 0px">

        <!--详情页返回-->
        <span style="float: left">
            <a href="car_index.html">
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div class="el-icon-back"style="font-size: 35px;color: #1e77ba">返回</div>
</a>
</span>
        <div style="width: 50px"></div>
        <div class="ui container" style="background: #1B1C1D;float: left">
                <span>
                 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  <img src="./img/LOGO.png" style="width: 70px;height: 45px;display: inline-block" alt="">
                    &nbsp;&nbsp;&nbsp;<font class="ui yellow header item" style="font-size: 30px">故障模拟考试中心</font>
                </span>

        </div>
        <span style="float: right;font-size: 15px; margin-top: 10px;color:#BDBDBD;">重庆奥维斯技术支持</span>
    </nav>
    <div style="height: 52px;">
    </div>
    <!--中间表格-->
    <table class="ui inverted table gradient" style="margin: 0px;border: 1px">
        <thead>
        <tr style="text-align:center;">
<!--            <th><font style="vertical-align: inherit;"><font style="vertical-align: inherit;font-size: 25px;top: 0px;">考试中心</font></font></th>-->
        </tr>
        </thead>
        <tbody>
            <tr v-for='(key,index) in items' class="tb_hover tr_change">
                <td :class='{checked:key.isChecked}' :class="{unchecked:tdColor,checked:!tdColor,checked:key.isChecked}" style="padding-left: 80px;font-size: 30px;color: #fbbd08;"><img
                        src="./img/guzhangpaichu.png" style="float: left " alt=""><font
                        style="vertical-align: inherit;"><font style="vertical-align: inherit">
                    <span class="font_fault" style="float: left" v-html="key.name"></span>
                </font></font>
                    <input :id="key.id"  @click="select(key)" v-model="breakdowns" :checked="key.isChecked" :value="key.id"  type="checkbox" style="float: right;height: 40px;width: 25px; ">
                        <select style="background-color:rgba(255,0,0,0);;border-radius: 10px;border: none;float: right;margin-right: 20%">
                            <option v-for="(method, index) in key.method">
                                <i class="font_fault">{{method}}</i>
                             </option>
                        </select>
                </td>
            </tr>
            <tr style="height: 40px;width: 100%;background-color: black;position: fixed;bottom:0;">
                <td>
                <!--全选/不全选/反选/随机故障/设置故障-->
                    <button @click="setBreakdown()" style="position:fixed;bottom: 5px;left: 93%" class="ui inverted green button"><font style="vertical-align: inherit;font-size: 14px">设置故障</font></button>
                    <i style="position:fixed;bottom: 5px;left: 91%;font-size: 18px;color: orange">/</i>
                    <button @click="checkedAll()" style="position:fixed;bottom: 5px;left: 78%" class="ui inverted teal button"><font style="vertical-align: inherit;font-size: 12px">全选</font></button>
                    <i style="position:fixed;bottom: 5px;left: 83%;font-size: 18px;color: orange">/</i>
                    <button @click="checkedNone()" style="position:fixed;bottom: 5px;left: 85%" class="ui inverted yellow button"><font style="vertical-align: inherit;font-size: 12px">不全选</font></button>
                    <i style="position:fixed;bottom: 5px;left: 76%;font-size: 18px;color: orange">/</i>
                    <button @click="checkedAnti()" style="position:fixed;bottom: 5px;left: 71%" class="ui inverted violet button"><font style="vertical-align: inherit;font-size: 12px">反选</font></button>
                    <i style="position:fixed;bottom: 5px;left: 69%;font-size: 18px;color: orange">/</i>
                    <button @click="randBreakdown()" style="position:fixed;bottom: 5px;left: 62.5%" class="ui inverted button"><font style="vertical-align: inherit;font-size: 14px">随机故障</font></button>
                </td>
            </tr>
        </tbody>
    </table>

</div>
</body>
<script src="js/vue.js"></script>
<script src="elementui/index.js"></script>
<script src="jquery/dist/jquery.js"></script>
<script src="Semantic-UI-CSS-master/semantic.js"></script>
<script src="js/axios-0.18.0.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            tdColor: true,
            number: 0,
            items:[
                {
                    id: 0,
                    name: "故障故障故障故障故障故障故障故障",
                    isChecked: false,
                    method: ["短路","断路","虚接"]
                },
                {
                    id: 1,
                    name: "故障故障故障故障故障故障故障故障",
                    isChecked: false,
                    method: ["短路","断路","虚接"]
                },
                {
                    id: 2,
                    name: "故障故障故障故障故障故障故障故障",
                    isChecked: false,
                    method: ["短路","断路","虚接"]
                },
                {
                    id: 3,
                    name: "故障故障故障故障故障故障故障故障",
                    isChecked: false,
                    method: ["短路","断路","虚接"]
                },
                {
                    id: 4,
                    name: "故障故障故障故障故障故障故障故障",
                    isChecked: false,
                    method: ["短路","断路","虚接"]
                },
                {
                    id: 5,
                    name: "故障故障故障故障故障故障故障故障",
                    isChecked: false,
                    method: ["短路","断路","虚接"]
                },
                {
                    id: 6,
                    name: "故障故障故障故障故障故障故障故障",
                    isChecked: false,
                    method: ["短路","断路","虚接"]
                },
                {
                    id: 7,
                    name: "故障故障故障故障故障故障故障故障",
                    isChecked: false,
                    method: ["短路","断路","虚接"]
                },
                {
                    id: 8,
                    name: "故障故障故障故障故障故障故障故障",
                    isChecked: false,
                    method: ["短路","断路","虚接"]
                },
                {
                    id: 9,
                    name: "故障故障故障故障故障故障故障故障",
                    isChecked: false,
                    method: ["短路","断路","虚接"]
                }
            ],
            breakdowns: []
        },
        methods: {
            /*渲染选中的表格*/
            select(key) {
                if (!key.isChecked) {
                    this.$set(key, 'isChecked', true);
                    return;
                }
                key.isChecked = !key.isChecked
            },
            /*全选*/
            checkedAll() {
                let array = [];
                for (var i = 0; i < this.items.length; i++) {
                    array.push(i);
                }
                this.breakdowns = array;

                this.items.forEach(key => {
                    key.isChecked = true;
                })
            },
            /*不全选*/
            checkedNone() {
                this.items.forEach(key => {
                    key.isChecked = false;
                    this.breakdowns = [];
                });
            },
            /*反选*/
            checkedAnti() {
                /*大数组减去小数组*/
                function arrChange(a, b) {
                    for (var i = 0; i < b.length; i++) {
                        for (var j = 0; j < a.length; j++) {
                            if (a[j] == b[i]) {   //如果数组下标相同,则减去重复的值
                                a.splice(j, 1);
                                j = j - 1;  //防止数组越界
                            }
                        }
                    }
                    return a;
                }

                let array = [];

                for (var i = 0; i < this.items.length; i++) {
                    array.push(i);
                }

                this.breakdowns = arrChange(array, this.breakdowns)
                this.items.forEach(key => {
                    key.isChecked = !key.isChecked;
                });


            },
            /*设置故障*/
            setBreakdown() {
                if (this.breakdowns.length > 0) {
                    this.$message.success("设置故障成功!")
                    axios.post("/common/xxx?breakdowns=" + this.breakdowns).then(() => {

                    });
                } else {
                    this.$message.error("你还没有设置任何故障!")
                }

            },
            /*随机故障*/
            randBreakdown() {
                this.items.forEach(key => {
                    key.isChecked = false;
                    this.breakdowns = [];
                });
                function sum (m,n){
                    var num = Math.floor(Math.random() * (m - n) + n);
                    return num;
                }

                let array = [];

                for (let i = 0; i < 3; i++) {
                    var randomNumber = sum(1, 10);
                        array.push(randomNumber);
                }

                this.breakdowns = array;

                for (let i = 0; i < array.length; i++) {
                        var number = array[i];
                        this.items[number]['isChecked'] = true;
                }

            }
        },
        created() {
            axios.get("/common/xxxx").then(res=>{

            })
        }
    })
</script>
</html>